<template>
  <div class="my">
    <div style="margin-bottom: 10px;">
      <el-text style="font-size: larger; font-weight: bolder;">
        {{ util.language('个人中心', 'Personal center') }}
      </el-text>
    </div>
    <el-form label-width="auto">
      <el-form-item>
        <el-button-group>
          <el-button @click="router.go(-1)">{{ util.language('返回', 'Back') }}</el-button>
          <el-button type="primary" @click="save()" :loading="loading.save">{{ util.language('保存', 'Save') }}</el-button>
          <el-button type="info" @click="show.resetPasswordShow = true" :loading="loading.resetPassword">{{ util.language('重置密码', 'Reset password') }}</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item :label="util.language('登录名', 'Username')">
        <el-input v-model="data.userInfo.username" disabled />
      </el-form-item>
      <el-form-item :label="util.language('称呼', 'Nick')">
        <el-input v-model="data.userInfo.nick" />
      </el-form-item>
      <el-form-item :label="util.language('电话号', 'Phone')">
        <el-input v-model="data.userInfo.phone" />
      </el-form-item>
      <el-form-item :label="util.language('角色', 'Role')">
        <el-input v-model="data.userInfo.roleName" disabled />
      </el-form-item>
      <el-form-item :label="util.language('特殊身份', 'Special identity')" v-if="data.userInfo.admin">
        <el-tag type="primary">{{ util.language('超管', 'Super admin') }}</el-tag>
      </el-form-item>
    </el-form>
  </div>

  <el-dialog v-model="show.resetPasswordShow" :title="util.language('重置密码', 'Reset password')" :width="550" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form label-width="auto">
      <el-form-item :label="util.language('旧密码', 'Old password')">
        <el-input v-model="data.oldPassword" type="password" style="width: 100%;" />
      </el-form-item>
      <el-form-item :label="util.language('新密码', 'New password')">
        <el-input v-model="data.newPassword" type="password" style="width: 100%;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show.resetPasswordShow = false">{{ util.language('取消', 'Cancel') }}</el-button>
        <el-button type="primary" @click="resetPassword()">{{ util.language('确认', 'OK') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../../apis/api'
import cache from '../../utils/cache'
import util from '../../utils/util'

const router = useRouter()

const data = reactive({
  userInfo: {},
  oldPassword: '',
  newPassword: ''
})
const loading = reactive({
  save: false,
  resetPassword: false
})
const show = reactive({
  resetPasswordShow: false,
})

api.get('/backend/user/getMyInfo').then(res => {
  data.userInfo = res
})

const save = () => {
  loading.save = true
  api.post('/backend/user/setMy', {
    nick: data.userInfo.nick,
    phone: data.userInfo.phone
  }).then(() => {
    const loginUser = cache.getObject(cache.keys.loginUser)
    loginUser.nick = data.userInfo.nick
    loginUser.phone = data.userInfo.phone
    cache.setObject(cache.keys.loginUser, loginUser)
    ElMessage.success(util.language('修改成功', 'Success'))
  }).finally(() => {
    loading.save = false
  })
}

const resetPassword = () => {
  loading.resetPassword = true
  api.post('/backend/user/resetMyPassword', {
    oldPassword: data.oldPassword,
    newPassword: data.newPassword
  }).then(res => {
    ElMessage.success(util.language('重置密码成功，请重新登录', 'Reset password success, please login again'))
    show.resetPasswordShow = false
    cache.setObject(cache.keys.loginUser, null)
    router.replace('/')
  }).finally(() => {
    loading.resetPassword = false
  })
}
</script>

<style lang="less">
.my {
  margin: auto;
  max-width: 660px;
}
</style>